<template>
  <div>
    <a-modal
      :visible.sync="visible"
      v-bind="$attrs"
      v-on="$listeners"
      :maskClosable="false"
      :footer="null"
      width="616px"
      title="重置"
      wrapClassName="add-modal-container"
      @cancel="closeModal()"
    >
      <a-form-model ref="ruleForm" :model="form" :rules="rules">
        <!-- 重置密码 -->
        <a-form-model-item ref="password" label="重置密码" prop="password">
          <a-input
            v-model.trim="form.password"
            :placeholder="'请输入“' + model.text + '”的重置密码'"
          />
        </a-form-model-item>
      </a-form-model>
      <div class="form-footer flex">
        <a-button type="default" @click="closeModal()">取消 </a-button>
        <a-button type="primary" :loading="loading" @click="submit">
          提交
        </a-button>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { getUserReset } from "@/api/user-center/userManage.js";
import { notificationTip } from "@/utils";
export default {
  name: "resetModal",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    model: {
      type: Object,
      default: {},
    },
  },
  watch: {
    visible: {
      handler(val) {
        this.$emit("update:visible", val);
        if (val) {
        }
      },
      immediate: true,
    },
  },
  data() {
    return {
      loading: false,
      form: {
        //重置密码
        password: "",
      },
      rules: {
        password: [
          { required: true, message: "请输入重置密码" },
          {
            min: 6,
            max: 16,
            message: "长度在 6 到 16 个字符",
          },
        ],
      },
    };
  },
  mounted() {},
  methods: {
    //关闭弹窗
    closeModal() {
      this.resetForm();
      this.$emit("update:visible", false);
    },
    //提交
    submit() {
      this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          this.loading = true;
          let { id } = this.model;
          let { password } = this.form;
          getUserReset({ id, password })
            .then((res) => {
              notificationTip("success", "重置密码成功！");
              this.closeModal();
              this.$parent.getTableData();
            })
            .catch((_) => {})
            .finally((_) => {
              this.loading = false;
            });
        }
      });
    },
    //重置表单
    resetForm() {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.add-modal-container {
  .ant-modal-body {
    padding: 20px 60px;
    .ant-form-item {
      .flex();
      .ant-form-item-label {
        flex-shrink: 0;
        width: 80px;
      }
      .ant-form-item-control-wrapper {
        flex: 1;
      }
    }
    .form-footer {
      justify-content: center;
    }
  }
}
</style>
